import React, {PureComponent} from 'react';
import {connect} from 'dva';

import {routerRedux} from 'dva/router'
import {
    Row,
    Col,
    Card,
    Form,
    Input,
    Select,
    Button,
    DatePicker,
    Modal,
    message
} from 'antd';

import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './distributorOrderExcel.less';
import DistributeOrderExcelList from '../../components/Report/DistributeOrderExcel/index';
const { RangePicker } = DatePicker;

const getValue = obj => Object.keys(obj).map(key => obj[key]).join(',');
const FormItem = Form.Item;
@connect(state => ({
    rule: state.distributeOrderExcel
}))
@Form.create()
export default class DistributeCountReport extends PureComponent {

    state = {
        formValues: {},
        record: {},
        selectedRows: [],
        recObjectVisible: false,
        add_time: []
    };
    componentDidMount() {
         const nick_name = this.props.location.state
        if (this.props.location.state) {
            this.props.dispatch({
                type: 'distributeOrderExcel/fetch',
                payload: nick_name,
            });
            this.setState({
              formValues:  nick_name,
            })
        } else {
        this.props.dispatch({
            type: 'distributeOrderExcel/fetch',

        });
        }

    }

    handleSearch = (e) => {
        e.preventDefault();

        const {dispatch, form} = this.props;

        form.validateFields((err, fieldsValue) => {
            if (err) return;

            const values = {
                ...fieldsValue,
                add_time: this.state.add_time,
                updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(),
            };

            this.setState({
                formValues: values,
            });

            dispatch({
                type: 'distributeOrderExcel/fetch',
                payload: values,
            });
        });
    }

    handleFormReset = () => {
        const {form, dispatch} = this.props;
        form.resetFields();
        // dispatch({
        //     type: 'distributeOrderExcel/fetch',
        // });

    }

    onTimeChange = (value, dateString) => {
        this.setState({
            add_time: dateString
        })
    }
    handleOrderListChange = (pagination) => {
        const {dispatch} = this.props;
        const {formValues} = this.state;

        const params = {
            currentPage: pagination.current,
            pageSize: pagination.pageSize,
            ...formValues,
        };

        dispatch({
            type: 'distributeOrderExcel/fetch',
            payload: params,
        });
    }


    handleSrearchByTime = (timeType,e) => {
        // console.log(timeType);
        const {dispatch, form} = this.props;

        form.setFieldsValue({
            add_time: undefined,
        })
        form.validateFields((err, fieldsValue) => {
            if (err) return;
            fieldsValue.add_time = undefined;
            const values = {
                ...fieldsValue,
                timeType: timeType,
                updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(),
            };

            this.setState({
                formValues: values,
            });

            dispatch({
                type: 'distributeOrderExcel/fetch',
                payload: values,
            });
        });

    }

    renderSimpleForm(){
        const {getFieldDecorator} = this.props.form;
        return (
            <Form onSubmit={this.handleSearch} layout="inline">
                <Row gutter={{md: 8, lg: 24, xl: 48}}>
                    <Col md={8} sm={24}>
                        <FormItem label="分销商名称">
                            {getFieldDecorator('nick_name')(
                                <Input placeholder="请输入"/>
                            )}
                        </FormItem>
                    </Col>
                    <Col md={8} sm={24}>
                        <FormItem label="订单号">
                            {getFieldDecorator('order_sn')(
                                <Input placeholder="请输入"/>
                            )}
                        </FormItem>
                    </Col>
                    <Col md={8} sm={24}>
                        <span className={styles.sumbitButtons}>
                          <Button type="primary" htmlType="submit">查询</Button>
                          <Button style={{marginLeft: 8}} onClick={this.handleFormReset}>重置</Button>
                        </span>
                    </Col>

                </Row>
                <Row gutter={{md: 8, lg: 24, xl: 48}}>

                    <Col md={8} sm={24}>
                        <FormItem label="订单状态">
                            {getFieldDecorator('order_status')(
                                <Select placeholder="请选择" style={{width: '100%'}}>
                                    <Option value="">请选择</Option>
                                    <Option value="0">未确认</Option>
                                    <Option value="1">确认</Option>
                                    <Option value="2">已取消</Option>
                                    <Option value="3">无效</Option>
                                    <Option value="4">退货</Option>
                                    <Option value="5">已删除</Option>
                                </Select>
                            )}
                        </FormItem>
                    </Col>
                    <Col md={8} sm={24}>
                        <FormItem label="支付状态">
                            {getFieldDecorator('pay_status')(
                                <Select placeholder="请选择" style={{width: '100%'}}>
                                    <Option value="">请选择</Option>
                                    <Option value="0">未付款</Option>
                                    <Option value="1">付款中</Option>
                                    <Option value="2">已付款</Option>
                                </Select>
                            )}
                        </FormItem>
                    </Col>
                    <Col md={8} sm={24}>
                        <FormItem label="物流状态">
                            {getFieldDecorator('shipping_status')(
                                <Select placeholder="请选择" style={{width: '100%'}}>
                                    <Option value="">请选择</Option>
                                    <Option value="0">未发货</Option>
                                    <Option value="1">已发货</Option>
                                    <Option value="2">已收货</Option>
                                    <Option value="3">退货</Option>
                                    <Option value="4">备货中</Option>
                                </Select>
                            )}
                        </FormItem>
                    </Col>
                </Row>
                <Row gutter={{md: 8, lg: 24, xl: 48}}>
                    <Col md={12} sm={24}>
                        <FormItem label="订单生成时间">
                            {getFieldDecorator('add_time', {
                                rules: [{ type: 'array' }],
                            })(
                                <RangePicker showTime format="YYYY-MM-DD HH:mm:ss" size="small"  onChange={this.onTimeChange}/>
                            )}
                        </FormItem>
                    </Col>
                    <Col md={12} sm={16}>
                        <span className={styles.sumbitButtons}>
                            <Button style={{marginLeft: 8}} size="small" onClick={this.handleSrearchByTime.bind(this,1)}>最近一天</Button>
                            <Button style={{marginLeft: 8}} size="small" onClick={this.handleSrearchByTime.bind(this,2)}>最近三天</Button>
                            <Button style={{marginLeft: 8}} size="small" onClick={this.handleSrearchByTime.bind(this,3)}>最近一周</Button>
                            <Button style={{marginLeft: 8}} size="small" onClick={this.handleSrearchByTime.bind(this,4)}>最近一个月</Button>
                            <Button style={{marginLeft: 8}} size="small" onClick={this.handleSrearchByTime.bind(this,5)}>最近三个月</Button>
                        </span>
                    </Col>

                </Row>
            </Form>
        );
    }

    renderForm() {
        return this.renderSimpleForm();
    }

    render() {
        const {record, selectedRows,recObjectVisible} = this.state;
        const {rule:{loading: ruleLoading, data} } = this.props;
        return (
            <PageHeaderLayout title="分销商订单报表">
                <Card bordered={false}>
                    <div className={styles.tableList}>
                        <div className={styles.tableListForm}>
                            {this.renderForm()}
                        </div>
                        {/*<div className={styles.tableListOperator}>*/}
                        {/*<Button icon="plus" type="primary" onClick={() => this.handleAddBrand()}>新建</Button>*/}
                        {/*</div>*/}
                    </div>
                    <DistributeOrderExcelList
                        selectedRows={selectedRows}
                        loading={ruleLoading}
                        data={data}
                        onChange={this.handleOrderListChange}
                        onSelectRow={this.handleSelectRows}
                        onDelRow={this.handleDelBrandRow}
                        onEditRow={this.handleEditBrandRow}
                        onRecommendRow={this.handleRecommendRow}
                    />

                </Card>
            </PageHeaderLayout>
        );
    }
}
